<template>
	<el-container>
		<el-header class="homeHeader">
			<div class="title">
				云E办
			</div>
			<div>
				<i class="fa fa-weixin fa-2x" 
				 style="color:black;margin-right: 10px;"
				 @click="goChat"
				 ></i>
				<el-dropdown class="userInfo" @command="commandHeadler">
					<span class="el-dropdown-link">
						<i>{{ user.name }}</i>
						<!-- {{user.name}}<i><img :src="user.userFace"/></i> -->
						<i><img :src="user.userFace" /></i>
						
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
						<el-dropdown-item command="setting">设置</el-dropdown-item>
						<el-dropdown-item command="logout">注销登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</el-header>
		<el-container>
			<el-aside width="200px" style="overflow: hidden;">
				<el-menu router unique-opened>
					<el-submenu :index="index + ''" v-for="(item, index) in routes" :key="index" v-if="!item.hidden">
						<template slot="title">
							<i :class="item.iconCls" style="color: aquamarine;margin-right: 5px;"></i>
							<span>{{ item.name }}</span>
						</template>
						<el-menu-item :index="children.path" v-for="(children, index) in item.children" :key="index">
							{{ children.name }}
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>
			<el-main>
				<el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$router.currentRoute.path!='/home'">
					<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
				</el-breadcrumb>
				<div class="homeWelcome" v-if="this.$router.currentRoute.path=='/home'">
					欢迎来到云e办系统
				</div>
				<router-view class="homeRouterView"></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
export default {
	name: "Home",
	data() {
		return {
			//user: JSON.parse(window.sessionStorage.getItem('user'))
		}
	},
	computed: {
		routes() {
			return this.$store.state.routes;
		},
		user(){
			return this.$store.state.currentAdmin;
		}
	},
	methods: {
		goChat(){
			this.$router.push('/chat')
		},
		commandHeadler(command) {
			if (command === 'logout') {
				this.$confirm('此操作将注销登录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//注销登录
					this.postRequest('/logOut', null).then(resp => {
						if (resp.code = 200) {
							console.log(resp)
							this.$router.replace('/')
							window.sessionStorage.removeItem('tokenStr')
							window.sessionStorage.removeItem('user')
							this.$store.commit('initRoutes', [])
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消注销'
					});
				});
			}
			if(command=='userinfo'){
				this.$router.push('/userinfo')
			}
		}
	}
}
</script>

<style>
.homeHeader {
	background: #00aeec;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0px 15px;
	box-sizing: border-box;
}

.homeHeader .title {
	font-size: 30px;
	font-family: 华文楷体;
	color: white;
}

.homeHeader .userInfo {
	cursor: pointer;
}

.el-dropdown-link img {
	width: 40px;
	height: 40px;
	border-radius: 24px;
	margin-left: 8px;
}

.homeWelcome {
	text-align: center;
	font-size: 40px;
	font-family: 华文行楷;
	color: #409eff;
	padding-top: 200px;
}

.homeRouterView {
	margin-top: 20px;
	text-align: left;
}
</style>